<script setup>
import { onMounted, reactive, ref } from 'vue';
import {useRongziyulanFind} from "@/api/rongziyulan"
import { useRoute } from 'vue-router';
import {useRongziStore} from "@/stores/rongzi"
import {updateRongzixiangqing} from "@/api/rongziyulan"

    const router = useRoute();
    const baseUrl=ref("/src/assets/img/fileInfo/")
    const rongzixinxi=reactive({
        financeId:"",//融资id
        money:"",//融资额度
        rate:"",//利息
        repayment:"",//还本付息时间
        realName:"",//申请人名字
        phone:"",//申请人手机号码
        idNum:"",//申请人身份证号码
        combinationName1:"",//组合贷款人1姓名
        combinationPhone1:"",//组合贷款人1手机号
        combinationIdnum1:"",//组合贷款人1身份证号码
        combinationName2:"",//组合贷款人2姓名
        combinationPhone2:"",//组合贷款人2手机号"
        combinationIdnum2:"",//组合贷款人2身份证号码
        fileInfo:"",//图片路径/chayangji.jpg
        status:""//status：0：申请中 1：驳回 2：申请通过)
    })
    const modal1=ref(false)
    

    onMounted(
        ()=>{
            
            rongzixinxiFind()

            console.log(rongzixinxi)
        }
    )


    const rongzixinxiFind=async()=>{
        const res=await useRongziyulanFind(router.query.financeId)
            rongzixinxi.financeId=router.query.financeId
            rongzixinxi.money=res.data.money
            rongzixinxi.rate=res.data.rate
            rongzixinxi.repayment=res.data.repayment
            rongzixinxi.realName=res.data.realName
            rongzixinxi.phone=res.data.phone
            rongzixinxi.idNum=res.data.idNum
            rongzixinxi.combinationName1=res.data.combinationName1
            rongzixinxi.combinationPhone1=res.data.combinationPhone1
            rongzixinxi.combinationIdnum1=res.data.combinationIdnum1
            rongzixinxi.combinationName2=res.data.combinationName2
            rongzixinxi.combinationPhone2=res.data.combinationPhone2
            rongzixinxi.combinationIdnum2=res.data.combinationIdnum2
            rongzixinxi.fileInfo=res.data.fileInfo
            rongzixinxi.status=res.data.status
        console.log(rongzixinxi);
        
    }
    const catUpFile=()=>{
        modal1.value=true
    }

    // 驳回发送请求修改
    const reject=()=>{
        rongzixinxi.status=1
        updateRongzixiangqing(rongzixinxi)
        console.log(rongzixinxi);
        
    }
    const pass=()=>{
        rongzixinxi.status=2
        updateRongzixiangqing(rongzixinxi)
        console.log(rongzixinxi);
    }
   
</script>
<template name="Rongzixiangqing">
     <Card style="width:100%">
            <Row>
                <Col span="8">
                    <div>
                        <Text>
                        融资额度：
                    </Text>
                    <Input v-model="rongzixinxi.money" class="auto-width-input" />
                    <Text>
                        （单位：元）
                    </Text>
                    </div>
                    
                </Col>
                <Col span="8">
                    <div>
                        <Text>
                        利息：
                    </Text>
                    <Input v-model="rongzixinxi.rate" class="auto-width-input" />
                    <Text>
                        %
                    </Text>
                    </div>
                </Col>
                <Col span="8">
                    <div>
                        <Text>
                        还本付息时间：
                    </Text>
                    <Input v-model="rongzixinxi.repayment" class="auto-width-input" />
                    <Text>
                        （单位：月）
                    </Text>
                    </div>
                </Col>
            </Row>
            <Row>
                <Col span="8">
                    <div>
                        <Text>
                            申请人名字：
                    </Text>
                    <Input v-model="rongzixinxi.realName" class="auto-width-input" />
                   
                    </div>
                    
                </Col>
                <Col span="8">
                    <div>
                        <Text>
                            申请人手机号码：
                    </Text>
                    <Input v-model="rongzixinxi.phone" class="auto-width-input" />
                    
                    </div>
                </Col>
                <Col span="8">
                    <div>
                        <Text>
                       申请人身份证号码：
                    </Text>
                    <Input v-model="rongzixinxi.idNum" class="auto-width-input" />
                    
                    </div>
                </Col>
            </Row>
            <div v-if="useRongziStore().combinationName!='无'">
                <Row>
                <Col span="8">
                    <div>
                        <Text>
                            组合贷款人1姓名：
                    </Text>
                    <Input v-model="rongzixinxi.combinationName1" class="auto-width-input" />
                   
                    </div>
                    
                </Col>
                <Col span="8">
                    <div>
                        <Text>
                            组合贷款人1手机号：
                    </Text>
                    <Input v-model="rongzixinxi.combinationPhone1" class="auto-width-input" />
                    
                    </div>
                </Col>
                <Col span="8">
                    <div>
                        <Text>
                            组合贷款人1身份证号码：
                    </Text>
                    <Input v-model="rongzixinxi.combinationIdnum1" class="auto-width-input" />
                    
                    </div>
                </Col>
            </Row>
            <Row>
                <Col span="8">
                    <div>
                        <Text>
                            组合贷款人2姓名：
                    </Text>
                    <Input v-model="rongzixinxi.combinationName2" class="auto-width-input" />
                   
                    </div>
                    
                </Col>
                <Col span="8">
                    <div>
                        <Text>
                            组合贷款人2手机号：
                    </Text>
                    <Input v-model="rongzixinxi.combinationPhone2" class="auto-width-input" />
                    
                    </div>
                </Col>
                <Col span="8">
                    <div>
                        <Text>
                            组合贷款人2身份证号码：
                    </Text>
                    <Input v-model="rongzixinxi.combinationIdnum2" class="auto-width-input" />
                    
                    </div>
                </Col>
            </Row>
            </div>
            <Button type="primary" class="btn" @click="catUpFile">查看上传资料</Button>
            <Modal
                        title="资料"
                        v-model="modal1"
                        :mask-closable="false">
                        <Image :src="baseUrl+rongzixinxi.fileInfo" fit="fill" />
                    </Modal>
            <Row class="btn" justify="center" >
                <Col span="4" class="col-center">
                    
                    
                    <Button type="error" @click="reject" v-if="rongzixinxi.status!=1">驳回</Button>
                    
                    <Button type="success" style="margin-left: 5px;" @click="pass" v-if="rongzixinxi.status!=2">通过</Button>
                </Col>
            </Row>
           
    </Card>
</template>
<style lang="less" scoped>
.auto-width-input {
  width: min-content; /* 或者使用 min-content，根据需要调整 */
  min-width: 130px;
  box-sizing: border-box;
  padding: 5px; /* 根据你的设计调整内边距 */
  transition: width 0.2s; /* 添加过渡效果 */
}
.btn{
    margin-top: 20px;
}
.col-center{
    text-align: center;
}
</style>